<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ZUI，一个简单吸引人的前端框架。">
  <meta name="author" content="Zentao">

  <title>ZUI - 开源HTML5跨屏框架</title>

  <link href="../css/zui.min.css" rel="stylesheet">
  <link href="../css/example.css" rel="stylesheet">

  <script src="../../assets/jquery.js"></script>
  <script src="../js/zui.js"></script>

  <script src="../assets/js/example.js"></script>

  <script>
  $(function()
  {
    $('#dashboard').dashboard({shadowType: 'normal', sensitive: true});
  });
  </script>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ZUI</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="alerts.html">alerts</a></li>
            <li><a href="article.html">article</a></li>
            <li><a href="breadcrumb.html">breadcrumb</a></li>
            <li><a href="button-groups.html">button-groups</a></li>
            <li><a href="buttons.html">buttons</a></li>
            <li><a href="cards.html">cards</a></li>
            <li><a href="carousel.html">carousel</a></li>
            <li><a href="chosen.html">chosen</a></li>
            <li><a href="collapse.html">collapse</a></li>
            <li><a href="colorset.html">colorset</a></li>
            <li><a href="comment.html">comment</a></li>
            <li><a href="dashboard.html">dashboard</a></li>
            <li><a href="dropdowns.html">dropdowns</a></li>
            <li><a href="forms.html">forms</a></li>
            <li><a href="grid.html">grid</a></li>
            <li><a href="icons.html">icons</a></li>
            <li><a href="input-groups.html">input-groups</a></li>
            <li><a href="kindeditor.html">kindeditor</a></li>
            <li><a href="labels.html">labels</a></li>
            <li><a href="lightbox.html">Lightbox</a></li>
            <li><a href="list-group.html">list-group</a></li>
            <li><a href="list.html">list</a></li>
            <li><a href="modals.html">modals</a></li>
            <li><a href="navbars.html">navbars</a></li>
            <li><a href="navs.html">navs</a></li>
            <li><a href="pager.html">pager</a></li>
            <li><a href="panels.html">panels</a></li>
            <li><a href="popovers.html">popovers</a></li>
            <li><a href="progress.html">progress</a></li>
            <li><a href="tables.html">tables</a></li>
            <li><a href="tabs.html">tabs</a></li>
            <li><a href="textbox.html">textbox</a></li>
            <li><a href="tooltip.html">tooltip</a></li>
            <li><a href="type.html">type</a></li>
          </ul>
        </li>
        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
      </ul>
    </div>
  </nav>
  <article>
    <h1>Dashboard</h1>
    <div class="segment" style='max-width: 1600px; width: inherit; padding: 80px 50px; background: #f5f5f5'>
      <div id="dashboard" class="dashboard dashboard-draggable" data-height="300">
        <header></header>
        <section class='row'>
          <div class="col-md-6 col-sm-6" data-id='1'>
            <div class="panel" data-url='http://baidu.com'>
              <div class="panel-heading">
                <div class="panel-actions">
                  <button class="btn btn-mini refresh-panel"><i class="icon-refresh"></i></button>
                    <div class="dropdown">
                      <button role="button" class="btn btn-mini" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
                        <li><a href="#" class="remove-panel"><i class="icon-remove"></i> 移除</a></li>
                      </ul>
                    </div>
                  </div>1 <i class="icon-list-ul"></i> Html Panel : dl
                </div>
              <div class="panel-body">
                <dl>
                  <dt>Lorem.</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                  <dt>Ut.</dt>
                  <dd>Necessitatibus, fugit repellat fugiat a.</dd>
                  <dt>Aliquam.</dt>
                  <dd>Obcaecati cum suscipit consequuntur voluptas?</dd>
                  <dt>Minima!</dt>
                  <dd>Esse soluta iure corporis porro.</dd>
                  <dt>Sunt.</dt>
                  <dd>Delectus quos amet quidem eaque!</dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-sm-6" data-id='2'>
            <div class="panel" data-url='http://chanzhi.org'>
              <div class="panel-heading">
                <div class="panel-actions">
                  <a href="#"><i class="icon-refresh"></i></a>
                    <div class="dropdown">
                      <a href='#' role="button" data-toggle="dropdown"><span class="caret"></span></a>
                      <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
                        <li><a href="#" class='refresh-panel'><i class="icon-refresh"></i> 刷新</a></li>
                        <li><a href="#" class="remove-panel"><i class="icon-remove"></i> 移除</a></li>
                      </ul>
                    </div>
                  </div>2 <i class="icon-list-ul"></i> Html Panel : ul
                </div>
              <div class="panel-body">
                <ul>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Corrupti, hic illo a doloribus!</li>
                  <li>Magnam consequatur veniam ullam temporibus.</li>
                  <li>Dolores, nobis ratione dolorem voluptate.</li>
                  <li>Nulla, ratione dignissimos nesciunt sequi.</li>
                  <li>Praesentium, dicta accusamus laborum laboriosam!</li>
                  <li>Facere commodi dolor quasi. Nihil.</li>
                  <li>Esse, similique nulla doloremque dolorum.</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='3'>
            <div class="panel">
              <div class="panel-heading">3 Html Panel : ol<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button><button class="btn btn-mini btn-danger remove-panel"><i class="icon-remove"></i></button></div></div>
              <div class="panel-body">
                <ol>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Corrupti, hic illo a doloribus!</li>
                  <li>Magnam consequatur veniam ullam temporibus.</li>
                  <li>Dolores, nobis ratione dolorem voluptate.</li>
                  <li>Nulla, ratione dignissimos nesciunt sequi.</li>
                  <li>Praesentium, dicta accusamus laborum laboriosam!</li>
                  <li>Facere commodi dolor quasi. Nihil.</li>
                  <li>Esse, similique nulla doloremque dolorum.</li>
                </ol>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='4'>
            <div class="panel">
              <div class="panel-heading">4 Panel<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
              <div class="panel-body"></div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6" data-id='5'>
            <div class="panel">
              <div class="panel-heading">5 Table<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
              <div class="panel-body">
                <table class="table">
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Debitis, consectetur.</td>
                    <td>Ullam, asperiores.</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Saepe, mollitia.</td>
                    <td>Placeat, vel!</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Amet, architecto!</td>
                    <td>Natus, quis!</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Quam, nesciunt.</td>
                    <td>Perspiciatis, vel!</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Et, aut!</td>
                    <td>Molestias, necetatibus?</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Fugit, fuga?</td>
                    <td>Iure, officiis.</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Saepe, neque!</td>
                    <td>Deserunt, voluptates?</td>
                  </tr>
                  <tr>
                    <td>Lorem ipsum.</td>
                    <td>Praesentium, eum!</td>
                    <td>Numquam, molestias.</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6" data-id='6'>
            <div class="panel">
              <div class="panel-heading">6 Panel<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
              <div class="panel-body"></div>
            </div>
          </div>
          <div class="col-md-7 col-sm-6" data-id='7'>
            <div class="panel">
              <div class="panel-heading">7 Panel<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
              <div class="panel-body"></div>
            </div>
          </div>
          <div class="col-md-6 col-sm-6" data-id='9'>
            <div class="panel">
              <div class="panel-heading">9 Panel<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
              <div class="panel-body"></div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </article>
</body>
</html>
